<template>
  <div class="page">
    <div class="page-left">
      <el-alert
        title="提醒：食物的百分比总和不为100%"
        type="error"
        effect="dark"
        v-show="formError"
        :closable="false"
      >
      </el-alert>
      <el-form
        :inline="true"
        class="demo-form-inline"
        v-for="count in formNumber"
        :model="form[count - 1]"
        :key="count"
      >
        <el-form-item label="食材名">
          <el-input
            v-model="form[count - 1].foodName"
            placeholder="请输入食材"
          ></el-input>
        </el-form-item>
        <el-form-item label="食材占比(%)">
          <el-input-number
            v-model="form[count - 1].foodRatio"
            :controls="false"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <div class="page-buttom">
        <el-button type="primary" @click="getForm" :disabled="disabledAdd"
          >添加</el-button
        >
        <el-button type="success" @click="submit">提交</el-button>
        <el-button type="warning" @click="reset">清空</el-button>
      </div>
    </div>
    <div class="page-right">
      <!-- 未添加表格计算时出现的提示内容 -->
      <div class="page-right__note" v-show="rightContent == 'note'">
        <p class="note-title">温馨提示：</p>
        <div>
          在允许的情况下，请尽可能多选择来自家禽的肉，丰富的食材也是非常重要的。<br />
          <p>主料比例：</p>
          90%~95% 肉类 (肌肉组织，包括心脏、胗)<br />
          5% 肝脏(必须)<br />
          5% 其他内脏(脑、肾、胰、脾，非必须) <br /><br />
          肉里几乎不含钙，请额外添加蛋壳粉，以及其他营养(例如：维生素E，维生素B，牛磺酸)。<br />
          熟猫饭请去骨，谷饲家禽的脂肪含有过多的Omega-6，但也需要摄入适量脂肪，是否保留肉皮请根据自己猫的情况而定。
          <br /><br />
          猫是肉食动物，通常情况下不需要蔬菜等植物成分。严重便秘请酌情添加。
        </div>
      </div>
      <!-- 表格内容 -->
      <div class="page-right__table" v-show="rightContent == 'table'">
        <el-table :data="tableData" border>
          <el-table-column prop="foodName" label="食材"> </el-table-column>
          <el-table-column
            prop="foodRatio"
            label="原料比例"
            align="center"
            :formatter="formatRatio"
          >
          </el-table-column>
          <el-table-column
            prop="needWeight"
            label="所需食材量"
            align="center"
            :formatter="formatWeight"
          >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script lang="ts" src="./index.ts"></script>

<style scoped lang="scss" src="./index.scss" />
